<template>
  <dragger @getData="getData"
           @delete-area="$emit('delete-area',obj.uniqueCode)"
           @change-area="$emit('change-area')"
           @default-layout="$emit('default-layout')"
           @update-area="(height)=>{$emit('update-area',{uniqueCode:obj.uniqueCode,height})}"
           :obj="obj">
    <template slot="title-left">
      &nbsp;
    </template>
    <template slot="content">
      <div class="gs">
        <div class="gs-left">
          <el-image class="gs-left-pic"
                    :src="minioServe+'/user-picture/'+userInfo.avatar"></el-image>
          <div class="gs-left-warp">
            <span>{{getDateTime()}}{{userInfo.username}}</span>
            <span>{{orgInfo.orgName}} - {{deptInfo.deptName}}</span>
          </div>
        </div>
        <div class="gs-right">
          <div class="gs-right-warp">
            <span class="gs-right-warp-title">{{obj.name}}</span>
            <div class="gs-right-warp-content">
              <div>
                <avue-count-up :end="form.sumToDo.totalCnt"
                               :start="0"></avue-count-up>
                <span>总计</span>
              </div>
              <div>
                <avue-count-up :end="form.affairToDo.totalCnt"
                               :start="0"></avue-count-up>
                <span>事务</span>
              </div>
              <div>
                <avue-count-up :end="form.reviewToDo.totalCnt"
                               :start="0"></avue-count-up>
                <span>审批</span>
              </div>
              <div>
                <avue-count-up :end="form.taskToDo.totalCnt"
                               :start="0"></avue-count-up>
                <span>任务</span>
              </div>
            </div>
          </div>
          <div class="gs-right-warp">
            <span class="gs-right-warp-title">今日已办</span>
            <div class="gs-right-warp-content">
              <div>
                <avue-count-up :end="form.sumDone.totalCnt"
                               :start="0"></avue-count-up>
                <span>总计</span>
              </div>
              <div>
                <avue-count-up :end="form.affairDone.totalCnt"
                               :start="0"></avue-count-up>
                <span>事务</span>
              </div>
              <div>
                <avue-count-up :end="form.reviewDone.totalCnt"
                               :start="0"></avue-count-up>
                <span>审批</span>
              </div>
              <div>
                <avue-count-up :end="form.taskDone.totalCnt"
                               :start="0"></avue-count-up>
                <span>任务</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </dragger>
</template>

<script>
import dragger from './dragger'
import { mapGetters } from 'vuex'
import { getWorksum } from './config'

export default {
  components: { dragger },
  props: {
    obj: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      form: {
        affairDone: { totalCnt: 0 },
        affairToDo: { totalCnt: 0 },
        reviewDone: { totalCnt: 0 },
        reviewToDo: { totalCnt: 0 },
        sumDone: { totalCnt: 0 },
        sumToDo: { totalCnt: 0 },
        taskDone: { totalCnt: 0 },
        taskToDo: { totalCnt: 0 }
      }
    }
  },
  computed: mapGetters(['userInfo', 'minioServe', 'deptInfo', 'orgInfo']),
  methods: {
    getDateTime () {
      const hour = new Date().getHours();
      let result = ''
      if (hour >= 0 && hour < 5) result = '凌晨好，'
      if (hour >= 5 && hour < 7) result = '清晨好，'
      if (hour >= 7 && hour < 9) result = '早上好，'
      if (hour >= 12 && hour < 13) result = '中午好，'
      if (hour >= 13 && hour < 18) result = '下午好，'
      if (hour >= 18 && hour < 24) result = '晚上好，'
      return result;
    },
    getData () {
      getWorksum().then(res => {
        this.form = res.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.gs {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: space-between;
  &-left {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 10px;
    &-pic {
      width: 60px;
      border-radius: 100%;
    }
    &-warp {
      margin-left: 10px;
      height: 60px;
      display: flex;
      flex-flow: column;
      align-items: flex-start;
      justify-content: space-around;
      & > span:nth-child(1) {
        font-size: 14px;
        font-weight: bold;
      }
      & > span:nth-child(2) {
        color: #999;
      }
    }
  }
  &-right {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid #e6e6e6;
    padding-top: 10px;
    width: 100%;
    &-warp {
      display: flex;
      flex-flow: column;
      align-items: flex-start;
      justify-content: space-between;
      width: 50%;
      padding: 0 20px;
      &:nth-child(1) {
        border-right: 1px solid #e6e6e6;
      }
      &-title {
        font-size: 14px;
        margin-bottom: 10px;
      }
      &-content {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        & > div {
          display: flex;
          flex-flow: column;
          &:nth-child(1) {
            & > span:nth-child(1) {
              font-weight: bold;
            }
            & > span:nth-child(2) {
              font-weight: bold;
              color: #333;
            }
          }
          & > span:nth-child(1) {
            font-size: 16px;
            text-align: center;
          }
          & > span:nth-child(2) {
            margin-top: 5px;
            color: #808080;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>